<template>
  <div class="color-picker-wrapper" :title="title">
    <div class="color-preview" :style="{ backgroundColor: modelValue }"></div>
    <input type="color" :value="modelValue" class="color-picker" @change="handleChange" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'ColorPicker',
  props: {
    modelValue: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      default: '背景颜色',
    },
  },
  emits: ['update:modelValue'],
  methods: {
    handleChange(event: Event) {
      const target = event.target as HTMLInputElement
      this.$emit('update:modelValue', target.value)
    },
  },
}
</script>

<style scoped>
.color-picker-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-left: 2px;
}

.color-preview {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
}

.color-picker {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

/* 暗色主题下的样式调整 */
.dark-toolbar .color-preview {
  border-color: #475569;
}
</style>
